<template>
  <div class="section">
    <header>
      <van-checkbox v-model="checked" checked-color="#ee0a24"
        >商品</van-checkbox
      >
    </header>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        <van-card :price="item.price" desc="描述信息" :title="item.title">
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #thumb>
            <van-checkbox v-model="checked" checked-color="#ee0a24">
              <img :src="item.goodsImg" alt="" />
            </van-checkbox>
          </template>
          <template #num>
            <van-stepper
              v-model="item.val"
              theme="round"
              button-size="22"
            />
          </template>
        </van-card>
        <van-icon
          name="delete"
          color="#ee0a24"
          size="20"
          class="btn"
          @click="delCard(item)"
        />
      </li>
    </ul>

    <footer>
      <van-submit-bar :price="count" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </footer>
  </div>
</template>

<script>
import { getDetails } from "@/utils/api/api";
export default {
  data() {
    return {
      checked: true,
      cartList:[],
      count:null,
    };
  },
  beforeMount() {
    this.$store.state.cartList.forEach((item) => {
      getDetails(item.id).then((res) => {
        // console.log(res.data.data.data[0]);
        res.data.data.data[0].val = item.stepVal
        this.cartList.unshift(res.data.data.data[0]);
        this.count += (res.data.data.data[0].val * +res.data.data.data[0].price) * 100
      });
    });
    console.log(this.cartList);
  },
  methods: {
    onSubmit() {
      this.$router.push('/order')
      this.$store.commit("payOrder",{id:this.id,stepVal:this.stepVal})
    },
    onClickEditAddress() {},
    delCard(item) {
      this.$store.commit("delCard",item.id);
    },
  },
  watch : {
    value() {
      this.value = this.res
    }
  }
};
</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}
.section {
  header {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #e8e8e8;
    height: 40px;
    background: #f8f8f8;
  }
  ul {
    li {
      position: relative;
      margin-bottom: 10px;
      .btn {
        position: absolute;
        right: 16px;
        top: 8px;
      }
      img {
        width: 74px;
        height: 74px;
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>